
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGIS</title>
    <link href="./iframe/antd.min.css" rel="stylesheet" />
    <link href="./webGL/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <link href="./iframe/css/font_577982_beimm7aom3g.css" rel="stylesheet" />
    <link href="./iframe/css/geoFont/iconfont.css" rel="stylesheet" />
    <style>
      .ant-input{
    background: transparent;
    border: 1px solid #545c64
}
#draggable {
  background-color: rgba(25, 40, 58, 0.6);
  border-width: 0;
  color: #ffffff;
  margin-left: 30px;
  padding: 0 15px 0;
}
#draggable  .ant-slider-mark-text {
    color: #ffffff;
}
#draggable .sm-profile3d-content {
    background-color: transparent;
  }
#draggable .sm-content {
    background-color: transparent;
  }
#draggable.GafMapProfile .draggable .header {
    background: transparent;
   }
#treeComponent  .ant-tree li .ant-tree-node-content-wrapper:hover{
    background-color: transparent;
}
#treeComponent   .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
    background-color: transparent;
}
#treeComponent  .ant-input {
    color: #ffffff;
    background-color: transparent;
  }
#treeComponent   .ant-input-search-icon {
    color:#ffffff;
  }
#treeComponent   .ant-tree-checkbox-inner {
    background-color: transparent;
}
.bottom {
  position: absolute;
  right: -138px;
  bottom: 20px;
}
.map-type p{
  float: right !important;
  background-size: cover !important;
}
.ant-tooltip-inner{
  background-color: black;
  
}
.Treetooltip {
  z-index: 10000;
}
    </style>
    <link rel="stylesheet" href="./iframe/iview.css" />
    <script src="./iframe/vue.min.js"></script>
    <script src="./iframe/iview.js"></script>
    <script src="./webGL/Cesium/Cesium.js"></script>
    <script src="./iframe/antd.min.js"></script>
    <script src="./iframe/gafmapui.umd.min.js"></script>
    <script src="./iframe/vue-iclient3d-webgl.min.js"></script>
    <script src="./iframe/echarts.min.js"></script>
    <script src="./iframe/tooltip.js"></script>
    <script src="./iframe/axios.min.js"></script>
    <script src="./classic/SuperMap.Include.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
       new Vue({
          el: '#app',
          template: `<div>
    <gaf-map-basic-element v-if="loaded"/>
    <gaf-map-viewer
      :mvtLayerList="mvtLayerList"
      :smSceneList="smSceneList"
      :smSceneDataList="smSceneDataList"
      :smLayerList="smLayerList"
      :tinDemLayerList="tinDemLayerList"
      :gridDemLayerList="gridDemLayerList"
      :tiandituLayerList="tiandituLayerList"
        :token="token"
        @initialize="onViewerLoaded"
        ></gaf-map-viewer>
    <div v-if="mapApp">
        <gaf-map-tool-bar-horizontal v-for="horizontalToolbar in mapApp.horizontalToolbars" :content="horizontalToolbar.buttons" :position="horizontalToolbar.position"/>
        <gaf-map-tool-bar-vertical v-for="verticalToolbar in mapApp.verticalToolbars" :content="verticalToolbar.buttons" :position="verticalToolbar.position"/>
        <gaf-map-draggable
        visible="true"
        title="资源目录"
        :width="280"
        >
        <gaf-map-layer-tree
          :allCheckable="true"
          :leafnodeCheckable="false"
          :someNodeCheckable="false"
          :replaceFields="mapApp.resourceTree.replaceFields"
          :data-list="mapApp.resourceTree.allDataList"
          :searchInputShow="true"
          :opacityControl="true"
          :locationControl="true"
          :checkedLayerKeys="checkedLayerKeys"
          :check="onTreeNodeChecked"
          :select="onSelect"
          :expandedKeys="expandedKeys"
          icon-class-name="icon-butoumingdu2"
        />
        </gaf-map-draggable>
        <gaf-map-bottom
        @mapBottomChange="handleMapBottomChange"
        :bottomList="mapApp.bottomLayers"
        />
    </div>
</div>`,
          name: 'GafMapViewer',
        data() {
          return {
            checkedLayerKeys:[],
            expandedKeys:[],
            loaded: false,
            mapApp: null,
            location: null,
            layerList: [],
            token: null,
            bottomLayer: null,
          }
        },
        beforeCreate() {
          Vue.prototype.$bus = new Vue()
          Vue.prototype.$mapActions = gafmapui.mapActions
        },
        computed: {
          mvtLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'MVT'
            )
          },
          smSceneList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'RESTREALSPACE'
            )
          },
          smSceneDataList() {
            const data = this.layerList.filter(
              (item) => item && item.resourceTag === 'RESTREALSPACE-DATA'
            )
            return data
          },
          tinDemLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'TIN_DEM'
            )
          },
          gridDemLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'GRID_DEM'
            )
          },
          smLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'RESTMAP'
            )
          },
          tiandituLayerList() {
            return this.layerList.filter(
              (item) =>
                item &&
                item.resourceTag === 'MAPWORLD' &&
                item.isBaseLayer === true
            )
          },
        },
        watch: {
          "location":{
            immediate:true,
            handler:function(val){
            // 这样会触发
              console.log('xxxxxxxx',val)
            }
          }
        },

        methods: {
          getQueryVariable(variable) {
            let query = window.location.search.substring(1)
            let vars = query.split('&')
            for (let i = 0; i < vars.length; i++) {
              let pair = vars[i].split('=')
              if (pair[0] == variable) {
                return pair[1]
              }
            }
          },
          async loadAppConfig() {
            const self = this
            const previewCode = self.getQueryVariable('previewCode')
            let url = 'http://gaf.gaf-dev.chengdu/map/webgis-apps/test-one/config'
            if (previewCode != undefined) {
                url += '?previewCode=' + previewCode
            }
            const response = await axios.get(url)
            const mapApp = response.data.data
            debugger
            self.location = mapApp.location
            if (
              mapApp.bottomLayers !== null &&
              mapApp.bottomLayers.length > 0
            ) {
              const bottomLayer = mapApp.bottomLayers.filter(
                (item) => item.isDefault
              )
              if (bottomLayer.length > 0) {
                self.bottomLayer = bottomLayer[0]
              } else {
                self.bottomLayer = mapApp.bottomLayers[0]
                mapApp.bottomLayers[0].isDefault = true
              }
              self.layerList = [self.bottomLayer]
            }
            self.token = mapApp.token
            self.mapApp = mapApp
          },
          handleMapBottomChange(resourceId) {
            this.layerList.splice(0, 1)
            this.bottomLayer = this.mapApp.bottomLayers.filter(
              (item) => item.resourceId === resourceId
            )[0]
            this.layerList.unshift(this.bottomLayer)
          },
          onTreeNodeChecked(checkedKeys, info) {
      window.checkedLayerKeys = checkedKeys
      const self = this
      self.layerOpacityVisible = false
      const layerList = []
      let flag = false
      checkedKeys.forEach(key => {
        const data = self.allDataList.find(item => {
          return item.resourceId.toString() === key.toString()
        })
        if (data) {
          layerList.push(data)
        }
        if (info.checked) {
          if (data.legendData) {
            self.$store.commit('setlegendList', data.legendData)
            self.legendKey = key
            flag = true
          }
        } else if (key === self.legendKey) {
          flag = true
        }
      })
      if (!flag) {
        this.$store.commit('setlegendList', [])
      }
      self.layerList = layerList
      self.$bus.$emit('onCheckedLayerList', layerList)
    },onSelect2(selectedKeys, info) {
            const self = this
            const selectedKey = selectedKeys[0]
            const layers = self.layerList.map((item) => {
              if (item.resourceId === selectedKey) {
                const newLayer = { ...item, location: true }
                return newLayer
              }
              return item
            })
            this.layerList = layers
          },
          onSelect(selectedKeys, info) {
      if (selectedKeys[0]) {
        this.selectedKey = selectedKeys[0]
      }
      let currentNode
      if (this.selectedKey) {
        currentNode = this.layerList.find(
          layer => layer.resourceId === this.selectedKey
        )
        if (currentNode) {
          window.SMWEBGIS = window.SMWEBGIS || {}
          window.SMWEBGIS.currentLocateService = currentNode
        }
      }},onViewerLoaded() {
            this.loaded = true
            const toolMethods = this.$mapActions
            toolMethods.setView({
              altitude: 169.75064630011397,
              heading: 6.283185307179586,
              latitude: 30.584125661226473,
              tilt: 80.76092553923964,
              longitude: 114.35792029762224,
            })
          },
        },
        beforeMount() {
          this.loadAppConfig()
        },
        })
    </script>
  </body>
</html>
